 /*
 * @name: 新建编辑远程任务
 * @Author: along
 * @Date: 2019-06-16
 * @Last Modified by: along
 * @Last Modified time: 2020-06-16
 */
<template>
    <div class="container workTaskEdit">
        <div class="wrap">
            <div class="container-head">
                <p class="container-head-line"/>
                <h2 class="container-head-title">任务设置</h2>
            </div>
            <el-form
                v-if="init"
                ref="ruleForm"
                :model="formData"
                label-position="left"
                status-icon
                :rules="rules"
                label-width="90px"
                :disabled="false"
                style="margin: 30px 0 0 30px"
            >
                <el-form-item
                    label="项目标题"
                    prop="task_title"
                >
                    <el-popover
                        placement="top-start"
                        width="200"
                        trigger="hover"
                        popper-class="container-form-provide"
                    >
                        <p class="container-form-provide">
                            标题字数不超过16字
                        </p>
                        <el-button
                            slot="reference"
                            class="el-no-button"
                        >
                            <el-input
                                v-model="formData.task_title"
                                size="small"
                                placeholder="请输入项目标题"
                                maxlength="16"
                                show-word-limit
                                style="width:488px;"
                            />
                        </el-button>
                    </el-popover>
                </el-form-item>
                <el-form-item
                    label="项目总数"
                    prop="task_count"
                >
                    <el-input-number
                        v-model="formData.task_count"
                        controls-position="right"
                        size="small"
                        placeholder="请输入项目总数"
                        :min="1"
                        style="width:188px"
                    />
                </el-form-item>
                <el-form-item
                    prop="task_time"
                    label="项目时间"
                >
                    <el-date-picker
                        v-model="formData.task_time"
                        type="datetimerange"
                        range-separator="至"
                        size="small"
                        class="task-input"
                        start-placeholder="上架时间"
                        end-placeholder="下架时间"
                        style="width:488px;"
                    />
                </el-form-item>
                <el-form-item
                    prop="task_intro"
                    label="项目介绍"
                >
                    <ueditor
                        v-if="init"
                        ref="ueditor"
                        :default-value="formData.task_intro"
                    />
                </el-form-item>
                <div
                    class="container-head"
                    style="margin-left:-30px"
                >
                    <p class="container-head-line"/>
                    <h2 class="container-head-title">任务奖励设置</h2>
                </div>
                <el-form-item
                    prop="task_money"
                    label="项目金额"
                    style="margin-top:15px"
                >
                    <div style="display:flex;align-items:center">
                        <el-input-number
                            v-model="formData.task_money"
                            :precision="2"
                            :step="1"
                            size="small"
                            :min="0"
                            style="width:188px"
                        />
                        <p style="color:#606266;margin-left:8px">
                            元/次
                        </p>
                    </div>
                </el-form-item>
                <div
                    class="container-head"
                    style="margin-left:-30px;"
                >
                    <p class="container-head-line"/>
                    <h2 class="container-head-title">任务类型选择</h2>
                </div>
                <el-form-item
                    prop="task_type"
                    label="任务类型"
                    style="margin-top:15px"
                >
                    <div style="display:flex;align-items:center">
                        <el-radio-group v-model="formData.task_type">
                            <el-radio :label="1">文字</el-radio>
                            <el-radio :label="2">图片</el-radio>
                            <el-radio :label="3">问卷</el-radio>
                            <el-radio :label="4">短视频</el-radio>
                        </el-radio-group>
                        <p style="color:#F56C6C;margin-left:20px">
                            *此次任务需用户提交的重点是什么就选择什么类型
                        </p>
                    </div>
                </el-form-item>
                <div
                    class="container-head"
                    style="margin-left:-30px;"
                >
                    <p class="container-head-line"/>
                    <h2 class="container-head-title">绑定企业</h2>
                </div>
                <el-form-item
                    label="选择企业"
                    style="margin-top:15px"
                    prop="task_hire"
                >
                    <el-popover
                        placement="right-end"
                        width="484"
                        trigger="hover"
                        popper-class="container-form-provide"
                    >
                        <p class="container-form-provide">
                            请到该企业后台-【公司信息】中，确认该企业的logo、所在行业、公司人数、公司简介数据不为空，否则，需填充完整
                        </p>
                        <el-button
                            slot="reference"
                            class="el-no-button"
                        >
                            <el-select
                                v-model="formData.task_hire"
                                clearable
                                filterable
                                placeholder="请选择"
                                size="small"
                                remote
                                reserve-keyword
                                :remote-method="remoteMethod"
                                :loading="loading"
                            >
                                <el-option
                                    v-for="item in hireList"
                                    :key="item.hire_no"
                                    :label="item.company_name"
                                    :value="item.hire_no"/>
                            </el-select>
                        </el-button>
                    </el-popover>
                </el-form-item>
                <div
                    class="container-head"
                    style="margin-left:-30px;"
                >
                    <p class="container-head-line"/>
                    <h2 class="container-head-title">反馈内容设置</h2>
                </div>
            </el-form>
            <form-submit
                @send="getFormData"
                ref="submit"
            />
            <div class="zd-foot">
                <el-button
                    slot="reference"
                    type="primary"
                    style="width:100px"
                    size="small"
                    @click="fnFormPreview()"
                >
                    预览
                </el-button>
                <el-button
                    size="small"
                    type="primary"
                    style="width:100px;margin-left:50px"
                    @click="fnSubmit('ruleForm')"
                >
                    提交
                </el-button>
            </div>
        </div>

        <el-dialog
            title="请扫码预览"
            :visible.sync="dialogVisible"
            width="300px"
            center
        >
            <img
                :src="link"
                style="width:200px;height:200px;margin-left:28px"
            >
        </el-dialog>
    </div>
</template>

<script>
import { back } from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';
import formSubmit from '@/components/student/form.vue';
export default {
    mixins: [back],
    components: {
        ueditor,
        formSubmit
    },
    data () {
        return {
            dialogVisible: false,
            link: '',
            loading: false,
            list: [],
            hireList: [],//企业数据
            formData: {
                task_title: '',
                task_count: '',
                task_time: [],
                task_intro: '',
                task_money: 0,
                task_type: '',
                task_hire: ''
            },
            rules: {
                task_title: [
                    { required: true, message: '请填写项目名称', trigger: 'change' }
                ],
                task_count: [
                    { required: true, message: '请填写项目人数', trigger: 'change' }
                ],
                task_time: [
                    { required: true, message: '请选择项目时间', trigger: 'change' }
                ],
                task_money: [
                    { required: true, message: '请填写项目金额', trigger: 'change' }
                ],
                task_type: [
                    { required: true, message: '请选择任务类型', trigger: 'change' }
                ],
                task_hire: [
                    { required: true, message: '请选择企业', trigger: 'change' }
                ]
            },
            init: false,//页面加载开关
            task_no: '',//任务编号
            title: '',//页面标题
            authResult: {},
        };
    },
    filters: {},
    computed: {},
    watch: {},
    created () {
        let query = this.$route.query;

        if(query.task_no) {
            this.task_no = query.task_no;
            this.getData();
        } else {
            this.init = true;
        }

        this.title = query.task_no ? '编辑远程任务': '新建远程任务';
    },
    mounted () {
        this.$store.commit('SET_HEADER', [{ title: "APP后台"},{title: '工作'},{title: this.title}]);
        this.authResult = this.$route.meta.authResult;
        this.getSuggest();
    },
    methods: {
        /**
         * 同步获取自定义表单数据
         */
        getFormData (data) {
            this.list = JSON.parse(data);

            console.log(this.list, 'list');
        },

        /**
         * 获取任务数据
         */
        getData () {
            this.$post('/student/taskonline%5Cget', {
                task_no: this.task_no
            }, resp => {
                if (resp.code == 1) {
                    this.formData = {
                        task_title: resp.data.title,
                        task_count: resp.data.all_count,
                        task_time: [
                            resp.data.start_time * 1000,
                            resp.data.end_time * 1000
                        ],
                        task_money: resp.data.award_money,
                        task_type: resp.data.category,
                        task_hire: resp.data.hire_no
                    };

                    this.$set(this.formData, 'task_intro', resp.data.intro);

                    // this.$nextTick(() => {
                    //     if(this.$refs.ueditor){
                    //         this.$refs.ueditor.setContent(resp.data.intro);
                    //     }
                    // });

                    console.log(this.formData.task_intro, 'task_intro');

                    this.list = resp.data.form_config;
                    this.$refs.submit.setList(JSON.stringify(this.list));

                    this.init = true;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        type: 'warning'
                    });
                }
            });

        },

        /**
         * 提交
         */
        fnSubmit (formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    console.log(this.formData,'formData');
                    console.log(this.list,'list');

                    let list = this.list;

                    for (let i=0; i<list.length;i++) {
                        if (list[i].type == 1 && list[i].title == '') {
                            this.$message({
                                type: 'waring',
                                message: `第${i + 1}个单行文本标题不可以为空`,
                                center: true
                            });
                            return;
                        }
                        if (list[i].type == 6 && list[i].title == '') {
                            this.$message({
                                type: 'waring',
                                message: `第${i + 1}个多行文本标题不可以为空`,
                                center: true
                            });
                            return;
                        }
                        if (list[i].type == 2) {
                            for(let j=0; j<list[i].options.length;j++){
                                if(list[i].title == '') {
                                    this.$message({
                                        type: 'waring',
                                        message: `第${i + 1}个单选标题不可以为空`,
                                        center: true
                                    });
                                    return;
                                }
                                if(list[i].options[j].title == '') {
                                    this.$message({
                                        type: 'waring',
                                        message: `第${i + 1}个第${j + 1}个选项不可以为空`,
                                        center: true
                                    });
                                    return;
                                }
                            }
                        }
                        if (list[i].type == 3) {
                            for(let j=0; j<list[i].options.length;j++){
                                if(list[i].title == '') {
                                    this.$message({
                                        type: 'waring',
                                        message: `第${i + 1}个多选标题不可以为空`,
                                        center: true
                                    });
                                    return;
                                }
                                if(list[i].options[j].title == '') {
                                    this.$message({
                                        type: 'waring',
                                        message: `第${i + 1}个第${j + 1}个选项不可以为空`,
                                        center: true
                                    });
                                    return;
                                }
                            }
                        }
                        if (list[i].type == 8 && list[i].title == '') {
                            this.$message({
                                type: 'waring',
                                message: `第${i + 1}个图片标题不可以为空`,
                                center: true
                            });
                            return;
                        }

                        if (list[i].type == 9 && list[i].title == '') {
                            this.$message({
                                type: 'waring',
                                message: `第${i + 1}个短视频标题不可以为空`,
                                center: true
                            });
                            return;
                        }
                    }

                    this.formData.task_intro = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

                    let data = {
                        hire_no: this.formData.task_hire,
                        title: this.formData.task_title,
                        category: this.formData.task_type,
                        intro: this.formData.task_intro,
                        start_time: this.formData.task_time.length == 0 ? '' : new Date(this.formData.task_time[0]).getTime() / 1000,
                        end_time: this.formData.task_time.length == 0 ? '' : new Date(this.formData.task_time[1]).getTime() / 1000,
                        all_count: this.formData.task_count,
                        award_money: this.formData.task_money,
                        form_config: JSON.stringify(this.list)
                    };

                    if (!this.task_no) {
                        this.$post('/student/taskonline%5Cadd', data ,resp=> {
                            if (resp.code == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '提交成功'
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'workTaskUp'
                                    });
                                },500);
                            } else if (resp.code == 0) {
                                this.$message({
                                    type: 'waring',
                                    message: resp.msg
                                });
                            }
                        });
                    } else {
                        data.task_no = this.task_no;
                        this.$post('/student/taskonline%5Cset', data ,resp=> {
                            if (resp.code == 1) {
                                this.$message({
                                    type: 'success',
                                    message: '编辑成功'
                                });

                                setTimeout(()=>{
                                    this.$router.push({
                                        name: 'workTaskUp'
                                    });
                                },500);
                            } else if (resp.code == 0) {
                                this.$message({
                                    type: 'waring',
                                    message: resp.msg
                                });
                            }
                        });
                    }
                } else {
                    return false;
                }
            });
        },

        /**
         * 表单预览
         */
        fnFormPreview () {
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');

            this.$post('/student/taskonline%5Cpreview',{
                form_config: JSON.stringify(this.list)
            }, resp => {
                if(resp.code == 1) {
                    let url = resp.data.preview_url;
                    let link = `${base}/__local/common%5Cqrcode?content=${url}&__ticket=${ticket}`;

                    this.link = link;
                    this.dialogVisible = !this.dialogVisible;
                } else {
                    this.$message({
                        type: 'waring',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },

        /**
         * 获取合作企业列表
         */
        getSuggest (keyword) {
            this.$post('/wei4/hire_user%5Csuggest',{
                keyword: keyword,
                set_level: 1
            },resp => {
                if(resp.code == 1) {
                    setTimeout(()=>{
                        this.hireList = resp.data.list;
                        this.loading = false;
                    },400);
                }
            });
        },

        remoteMethod (val) {
            this.loading = true;
            this.getSuggest(val);
        }
    }
};
</script>

<style lang="less" scoped>
.container {
    background-color: #fff;
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    min-height: 100vh;
    .wrap {
        flex: 1;
        background-color: #fff;
        padding: 30px 24px 30px 24px;
    }
    &-head {
        height: 18px;
        display: flex;
        align-items: center;
        &-line {
            width: 2px;
            height: 14px;
            background: #1890ff;
            margin-right: 10px;
        }
        &-title {
            font-size: 14px;
            font-weight: 500;
            color: #333;
            height: 18px;
            line-height: 19px;
        }
    }
    .el-no-button {
        border: none;
        font-size: 12px;
        line-height: 20px;
        height: 36px;
        padding: 0;
        &:hover {
            background-color: transparent;
        }
    }
}
// provide样式
.container-form-provide {
    padding: 11px 18px;
    color: #666666;
    font-size: 12px;
    line-height: 20px;
    span {
        color: #333333;
        font-weight: 500;
    }
}
.zd-foot {
    height: 32px;
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 50px;
    margin-bottom: 30px;
}
</style>
<style lang="less">
    .workTaskEdit{
        .el-popover__title {
            text-align: center;
        }
    }
</style>
